<%--
  Created by IntelliJ IDEA.
  User: John Cage
  Date: 2020/11/14
  Time: 9:28
  To change this template use File | Settings | File Templates.
--%>
<%@ include file="../common/IncludeTop.jsp"%>
    <link rel="StyleSheet" href="../css/signOn.css" type="text/css" media="screen"/>

    <div id="signOn">
        <div id="separator">LOGIN</div>
        <form action="login" method="post" id="loginForm">
            <div id="login">
                <div class="inputLine">
                    <div class="label">Username:</div>
                    <input type="text" name="username" value="j2ee" />
                </div>

                <div class="inputLine">
                    <div class="label">Password:</div>
                    <input type="password" name="password" value="j2ee" />
                </div>

                <div class="inputLine">
                    <div class="label">VerifyCode:</div>
                    <input type="text" name ="verifyCode" id="verifyCodeInput" autocomplete="off"/><!--空白
                    --><div id="verifyCode"><img id="verifyCodePic" src="verifyCode"/></div>
                </div>

                <div class="inputLine" id="errorMessage"></div>

                <div class="inputLine" id="submitLine">
                        <div id="submitButton">Sign In</div>
                </div>

                <div class="inputLine" id="registerLine">
                    <div id="registerButton" onclick="window.location.href='userRegister'">Register Now!</div>
                </div>
            </div>
        </form>
    </div>

    <script>
        $(()=>
            {
                var $submitAlready = 0;
                $('#errorMessage').css('opacity', '0');

                var times = 0;//统计动画个数
                $('#submitButton').on('click', ()=>
                {
                    $('#loginForm').submit();
                }).on('animationend', ()=>
                {
                    times++;
                    if (times === 1)
                    {
                        $('#submitButton').text('Error');
                    }
                    else if(times === 2)
                    {
                        $('#submitButton').text('Sign In');
                    }
                    if(times === 3)
                    {
                        $('#submitButton').removeClass('errorButton');
                        times = 0;
                    }
                });
                $('#loginForm').on('submit', (event)=>
                {
                    event.preventDefault();//拦截提交事件
                    if($submitAlready === 0)//避免重复提交
                    {
                        $submitAlready = 1;
                        var $details = $('#loginForm').serialize();
                        $.post('login', $details, (data)=>
                        {
                            $submitAlready = 0;
                            if(data === "errorVerifyCode")
                            {
                                $('#errorMessage').text('Verify Code Error').css('opacity', '1');
                                $('#submitButton').addClass('errorButton');
                            }
                            else if(data === "errorAccount")
                            {
                                $('#errorMessage').text('Username or Password Error').css('opacity', '1');
                                $('#submitButton').addClass('errorButton');
                            }
                            else if(data === "ok")
                            {
                                window.location.href='main';
                            }
                        });
                    }
                    else
                    {
                        alert("Please don't submit repeatedly");
                    }
                });

                // $('#verifyCode').on('click', ()=>
                // {
                //     $.get('verifyCode', (data)=>
                //     {
                //         $('')
                //     });
                // });
            }
        );
    </script>

<%@ include file="../common/IncludeBottom.jsp"%>